<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Waterfall代码</title>
</head>
<body>
<style type="text/css">
.wf-main{
    position: relative;
    margin: 0 auto;
    width: 990px;
    overflow: hidden;
}
.wf-main .wf-cld{
    position: absolute;
    margin-bottom: 10px;
    padding:5px 8px;
    width: 214px;
    left: -9999px;
    top: -9999px;
    line-height:18px;
    border: 1px solid #999;
    border-radius: 4px;
    background-color: #ccc;
    overflow: hidden;
}
/*.wf-cld .inner{
    position: absolute;
    left: -9999px;
    top: -9999px;
    margin-bottom: 5px;
    width: 73px;
    overflow: hidden;
    border: 1px solid #f00;
    border-radius: 3px;
}
.wf-cld .title{
    margin: 0 0 5px;
    padding: 5px;
    width: 63px;
    color: #f00;
    font-size: 14px;
}*/
</style>
<div class="wf-main" id="wf-main">
    <div class="wf-cld"><h2 style="color:#f50">1瀑布流</h2></div>
    <div class="wf-cld"></div>
    <div class="wf-cld">3<br>4<br>4</div>
    <div class="wf-cld">4<br>4<br>4<br>4</div>
    <div class="wf-cld">5<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">6<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">7<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">8<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">9<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">10<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">18<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">19<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">20<br>4<br>4<br>4</div>
    <div class="wf-cld">20<br>4<br>4<br>4</div>
    <!--<div class="wf-cld" id="wf-inner">
        <h2 class="inner title">21、内部瀑布流</h2>
        <div class="inner">21-1<br>1</div>
        <div class="inner">21-2</div>
        <div class="inner">21-3</div>
        <div class="inner">21-4</div>
        <div class="inner">21-5<br></div>
        <div class="inner">21-6</div>
        <div class="inner">21-7</div>
        <div class="inner">21-8</div>
        <div class="inner">21-9</div>
    </div>-->
    <div class="wf-cld">22<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">23<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">24<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">11<br>2<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">12<br>2<br>2<br>3<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">13<br>4<br>4<br>3<br>3<br>1<br>2<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">14<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">15<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">16<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
    <div class="wf-cld">17<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
</div>
<script type="text/javascript">
function Waterfall(param){
    this.id = typeof param.container == 'string' ? document.getElementById(param.container) : param.container;
    this.colWidth = param.colWidth;
    this.colCount = param.colCount || 4;
    this.cls = param.cls && param.cls != '' ? param.cls : 'wf-cld';
    this.init();
}
Waterfall.prototype = {
    getByClass:function(cls,p){
        var arr = [],reg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)","g");
        var nodes = p.getElementsByTagName("*"),len = nodes.length;
        for(var i = 0; i < len; i++){
            if(reg.test(nodes[i].className)){
                arr.push(nodes[i]);
                reg.lastIndex = 0;
            }
        }
        return arr;
    },
	//取到数据中最小的列元素
    getMaxCol:function(arr){
        var len = arr.length,temp = arr[0];
        for(var i= 1; i < len; i++){
            if(temp < arr[i]){
                temp = arr[i];
            }
        }
        return temp;
    },
	//获取元素的marginBottom
    getMar:function(node){
        var dis = 0;
        if(node.currentStyle){
            dis = parseInt(node.currentStyle.marginBottom);
        }else if(document.defaultView){
            dis = parseInt(document.defaultView.getComputedStyle(node,null).marginBottom);
        }
        return dis;
		
    },
	//取到数据中最小的列索引
	getMinCol:function(arr){
		var ca = arr,cl = ca.length,temp = ca[0],minc = 0;
		for(var ci = 0; ci < cl; ci++){
			if(temp > ca[ci]){
				temp = ca[ci];
				minc = ci;
			}
		}
		return minc;
	},
    init:function(){
        var _this = this;
        var col = [],//列高
		    iArr = [];//索引
        var nodes = _this.getByClass(_this.cls,_this.id),len = nodes.length;
        for(var i = 0; i < _this.colCount; i++){
            col[i] = 0;
        }
        for(var i = 0; i < len; i++){
            nodes[i].h = nodes[i].offsetHeight + _this.getMar(nodes[i]);
            iArr[i] = i;
        }
		
		for(var i = 0; i < len; i++){
			var ming = _this.getMinCol(col);
			nodes[i].style.left = ming * _this.colWidth + "px";
			nodes[i].style.top = col[ming] + "px";
			col[ming] += nodes[i].h;
		}
		_this.id.style.height = _this.maxArr(col) + "px";
    }
};
/*new Waterfall({
    "container":"wf-inner",
    "colWidth":77,
    "colCount":3,
    "cls":"inner"
});*/
/*new Waterfall({
    "container":"wf-main",
    "colWidth":244,
    "colCount":4
});*/

var reg=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
var url="http://www.qidian.com/BookReader/1017141,20361055.aspx";

//方式一,最简单常用的方式
var rep=url.replace(reg,"$1ShowBook.aspx?bookId=$2&chapterId=$3");
//alert(rep);


//方式二 ,采用固定参数的回调函数
var rep2=url.replace(reg,function(m,p1,p2,p3){
								  alert(m);
								  return p1+"ShowBook.aspx?bookId="+p3+"&chapterId="+p3});
alert(rep2);
</script>
</body>
</html>